<template>
	<view class="addCard">
		<view class="top flex-align-center">
			<image src="https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/38551714205093614.png" mode=""></image>
			<view class="text flex-1">提现账户</view>
			<view >请确认为本人银行卡账户</view>
		</view>
		<view class="input">
			<text>持卡人姓名</text>
			<input type="text" v-model="form.ckrName" placeholder="请输入" />
		</view>
		<view class="input flex-align-center">
			<text>银行卡账号</text>
			<input type="number" v-model="form.cardNumber" @input="getBankName" placeholder="请输入" />
		</view>
		<view class="input flex-align-center"  >
			<text>归属银行</text>
			<input type="text" v-model="form.gsBankName"   placeholder="输入银行卡号自动解析" />
		</view>
		<view class="input flex-align-center"  >
			<text>证件类型</text>
			<input type="text" disabled @tap.stop="show"  v-model="form.zjValue" placeholder="请输入" />
		</view>
		<view class="input flex-align-center">
			<text>证件号码</text>
			<input type="number"  v-model="form.zjNumber" placeholder="请输入" />
		</view>
		<view class="input flex-align-center">
			<text>预留手机号</text>
			<input type="number" v-model="form.phone" placeholder="请输入" />
		</view>
		<view class="input flex-align-center" style="border: 0;" >
			<text>短信验证码</text>
			<input type="number" v-model="form.smsCode" placeholder="请输入" style="width: 278rpx;" />
			<button class="flex-aj-center" :disabled="disabled" @click="code" >{{text}}</button>
		</view>
		<view class="flex-align-center agree" @click="isAgree = !isAgree" >
			<image src="@/static/images/no.png" v-show="!isAgree" mode=""></image><image src="@/static/images/selected.png" v-show="isAgree" mode=""></image><view class="xieyi flex-align-center" >已阅读并同意 <view @click.stop="jump" >《用户服务协议》</view></view>
		</view>
		<view class="confirmBind flex-aj-center" @click="cnonfirmBind" >确认绑卡</view>
		<u-picker style="width: 100%;" v-model="showPicker" mode="selector" :range="rangeList" range-key="dictLabel" @confirm="confirm"  ></u-picker>
	</view>
</template>

<script>
	import {
		addCard,
		getGsBankName,
		sendCode
	} from "@/api/user.js"
	import {
		getDicts
	} from "@/api/api.js"
	import sendVerifyCode from "@/mixins/SendVerifyCode";
	import { mapGetters } from "vuex";
	export default{
		data(){
			return{
				showPicker:false,
				rangeList:[],
				isAgree:false,
				form:{
					
				}
			}
		},
		computed: {
			...mapGetters(['isLogin', 'uid']),
		},
		mixins: [sendVerifyCode],
		onLoad() {
			this.getDicts()
		},
		methods:{
			show(){
				console.log('进入测试')
				this.showPicker = true
			},
			jump(){
				console.log("进入")
				uni.navigateTo({
					url:'/pages/about/detail?title=用户服务协议&type=5'
				})
			},
			async code() {
				let that = this;
				if(!this.form.phone){
					return this.$util.Tips({
						title:'请先输入手机号'
					})
				}
				if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.form.phone)) return that.$util.Tips({
					title: '请输入正确的手机号码'
				});
				await sendCode({
					phone: that.form.phone
				}).then(res => {
					that.$util.Tips({
						title: res.msg
					});
					that.sendCode();
				}).catch(err => {
					return that.$util.Tips({
						title: err
					})
				})
			},
			getBankName(){
				if(this.form.cardNumber.length>15){
					getGsBankName({
						cardNumber:this.form.cardNumber
					}).then(res=>{
						this.$set(this.form,'gsBankName',res.data)
					})
				}
			},
			confirm(e){
				this.form.zjType = this.rangeList[e[0]].dictValue
				this.form.zjValue = this.rangeList[e[0]].dictLabel
				console.log(this.form.zjValue)
			},
			getDicts(){
				getDicts('hhr_bank_zj_type').then(res=>{
					this.rangeList = res.data;
				})
			},
			cnonfirmBind(){
				if(!this.form.ckrName){
					return this.$util.Tips({
						title:'请输入持卡人姓名'
					})
				}else if(!this.form.cardNumber){
					return this.$util.Tips({
						title:'请输入银行卡账号'
					})
				}else if(!this.form.gsBankName){
					return this.$util.Tips({
						title:'请输入归属银行名称'
					})
				}else if(!this.form.phone){
					return this.$util.Tips({
						title:'请输入预留手机号'
					})
				}else if(!this.form.zjNumber){
					return this.$util.Tips({
						title:'请输入证件号码'
					})
				}else if(!this.form.zjType){
					return this.$util.Tips({
						title:'请选择证件类型'
					})
				}else if(!this.form.smsCode){
					return this.$util.Tips({
						title:'请输入短信验证码'
					})
				}else if(!this.isAgree){
					return this.$util.Tips({
						title:'请勾选协议'
					})
				}else{
					// this.form.clientUserId = this.uid
					addCard(this.form).then(res=>{
						this.$util.Tips({
							title:'添加成功'
						},{
							tab:3,
							url:''
						})
					}).catch(err=>{
						this.$util.Tips({
							title:err
						})
					})
				}
			}
		}
	}
</script>
<style>
	page{
		background-color: #fff;
	}
</style>
<style lang="scss" scoped >
	.addCard{
		padding: 48rpx 24rpx;
		.top{
			image{
				width: 48rpx;
				height: 48rpx;
				margin-right: 16rpx;
			}
			.text{
				font-family: PingFangSC;
				font-weight: 500;
				font-size: 32rpx;
				color: #292929;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
			}
			:last-child{
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #F53831;
				line-height: 24rpx;
				font-style: normal;
			}
		}
		.input{
			width: 702rpx;
			padding: 48rpx 0;
			border-bottom: 2rpx solid #f5f5f5;
			&:last-child{
				border-bottom: 0;
			}
			
			text{
				width: 160rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				color: #666666;
				line-height: 32rpx;
				text-align: left;
				font-style: normal;
				margin-right: 48rpx;
			}
			input{
				width: 494rpx;
				height: 32rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 32rpx;
				line-height: 32rpx;
				overflow: visible !important;
				display: inline-block;
			}
			button{
				width: 168rpx;
				height: 56rpx;
				background: rgba(255,41,69,0.08);
				border-radius: 28rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 24rpx;
				color: #FF2945;
				line-height: 24rpx;
				text-align: left;
				font-style: normal;
				margin-left: 48rpx;
			}
		}
	}
	.agree{
		padding-top: 32rpx;
		image{
			width: 40rpx;
			height: 40rpx;
			margin-right: 16rpx;
		}
		.xieyi{
			font-family: PingFangSC;
			font-weight: 400;
			font-size: 28rpx;
			color: #292929;
			line-height: 28rpx;
			text-align: left;
			font-style: normal;
			view{
				color: #FF2945;
			}
		}
	}
	.confirmBind{
		margin-top: 48rpx;
		width: 100%;
		height: 96rpx;
		background: #FF2945;
		border-radius: 16rpx;
		font-family: PingFangSC;
		font-weight: 500;
		font-size: 32rpx;
		color: #FFFFFF;
		line-height: 32rpx;
	}
</style>